<template>
  <div class="content_box">
    <p class="banner">
      <img src="/static/images/banner.png" alt="" />
    </p>
    <div class="wrap-box">
   
      <div class="bg-wrap">
        <div class="img-wrap">
          <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230712/E4at7wEr3oQYBJ6ziRDt.jpg" alt="" />
        </div>
        <div class="info-wrap">
          <div class="left">
            <p class="name">{{ greeting }}，{{ userMsg.userVipName }}</p>
            <div class="progress-box">
              <p class="progress" :style="{ width: vipMsg.percent + '%' }"></p>
            </div>
            <p class="num" v-if="vipMsg.lack">距离{{ vipMsg.name }}还差<span>{{ vipMsg.lack }}</span></p>
            <p class="num" v-else>成就已满</p>
          </div>
          <div class="right">
            <div class="section-item">
              <div class="num">
                <p>￥{{ userMsg.available?userMsg.available:'0.00' }}</p>
              </div>
              <p class="text">会员余额</p>
            </div>
            <div class="section-item" @click="toMoreCardList">
              <div class="num">
                <p>{{ userMsg.extraTimeCardNum?userMsg.extraTimeCardNum:0 }}张</p>
              </div>
              <p class="text">加时卡</p>
            </div>
          </div>
        </div>
      </div>
      <p class="dh_fl" @click="toFl">
        <img src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20251024/ACE7QxtMGx4TWFPtiRuy.png" alt="">
      </p>
      <div class="uvip-wrap" v-if="userCardList.length">
        <div class="coupon">
          <div class="coupon-title">
            <div>
              <p class="line"></p>
              会员权益
              <span>限时加时卡，每周可领取</span>
            </div>
            <p class="djs" v-if="countdown > 0">
              <!-- 1天03:23:45后过期 -->
              <van-count-down class="control-count-down" use-slot :time="countdown" @change="onChange" @finish="onFinish">
                <text class="item">{{ timeData.hours }}<text class="mh">小时</text></text>
                <text class="item">{{ timeData.minutes }}<text class="mh">分钟</text></text>
                <text class="item">{{ timeData.seconds }}<text class="mh">秒后过期</text></text>
                <!-- <text class="mh">后到期</text> -->
              </van-count-down>
             
            </p>
          </div>
          <div class="coupon-item">
            <scroll-view
              scroll-x
              class="hor-scroll"
            >
              <div class="item" v-for="(item, index) in userCardList" :key="index">
                <div class="showimg">
                  <img src="/static/images/yh13.png" alt="" srcset="">
                </div>
                <p class="label">免费打</p>
                <p class="time">{{ item.duration }}<span>分钟</span></p>
                <p class="text">{{item.cardIlk==0?'台球':'麻将'}}通用加时卡</p>
                <!-- 待使用 -->
                <div class="anniu" v-if="item.status === 0">
                  <p @click="toShiYong(item.id)">使用</p>
                  <p @click="toZengSong(item.id)">转赠</p>
                </div>
                <!-- 已使用 -->
                <div class="anniu tsbtn" v-if="item.status === 1">
                  <p>已使用</p>
                </div>
                <!-- 已转增 -->
                <div class="anniu" v-if="item.status === 2">
                  <p>已转赠好友</p>
                </div>
                <!-- 过期 -->
                <div class="anniu tsbtn" v-if="item.status === 3">
                  <p>已过期</p>
                </div>
              </div>
            </scroll-view>
            
            <!-- <div class="item">
              <p class="label">免费打</p>
              <p class="time">30<span>分钟</span></p>
              <p class="text">通用抵时券</p>
              <div class="anniu">
                <p>已经使用</p>
              </div>
            </div>
            <div class="item">
              <p class="label">免费打</p>
              <p class="time">30<span>分钟</span></p>
              <p class="text">通用抵时券</p>
              <div class="anniu">
                <p>已转赠好友</p>
              </div>
            </div> -->
          </div>
          <p class="more" @click="toMoreCardList">查看更多</p>
        </div>
      </div>
    </div>
    <div class="star_box" @click="toStar">
      <img class="bj" src="https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20240124/whbE4AfIBxBrU9MRCakX.png" alt="">
      <div class="star">
        <div class="title_box">
          <p class="line"></p>
          <p class="title">攒星兑礼</p>
        </div>
        <div class="xx">
          <p v-for="(item,index) in pointMsg.userStarRecordList" :key="index">
            <span>{{item.orderNum}}</span>
            <img v-if="item.orderNum" src="/static/images/dk_star.png" alt="">
            <img v-else src="/static/images/hui_star.png" alt="">
          </p>
        </div>
      </div>
      <div class="time_box">
        <div class="left">
          <p class="time">01-01至12-25</p>
          <p class="text">台球打3<span>送1</span></p>
          <p class="text">打5场<span>送1场</span></p>
        </div>
        <div class="right">
          已攒<span>{{pointMsg.starValue}}</span><van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="all-wrap">
      <div class="scan-wrap" @click="saoma">
        <div class="mask-bg1"></div>
        <div class="mask-bg2"></div>
        <img class="bg-icon" src="/static/images/wrap-img1.png" alt="" />
        <div class="text-box">
          <p class="name">扫码开台</p>
          <p class="text">请扫桌台/房门上的二维码</p>
        </div>
        <p class="anniu">立即开台</p>
      </div>
      <div class="or-wrap">
        <div class="invite-wrap" @click="toChongzhi">
          <p class="content-top">会员充值</p>
          <p class="content-bottom">多充多送，多重优惠</p>
          <img class="bg-icon" src="/static/images/wrap-img3.png" alt="" />
        </div>
        <div class="invite-wrap" @click="toMeituan">
          <p class="content-top">团购核销</p>
          <p class="content-bottom">抖音/美团/点评/快手</p>
          <img class="bg-icon" src="/static/images/wrap-img2.png" alt="" />
        </div>
      </div>
    </div>
    <div class="coupon-list">
      <div class="title-box">
        <div class="title">
          <p class="line"></p>
          门店优惠
          <span>限量卡卷套餐，每周一更新库存</span>
        </div>
        <div class="more" @click="toCardList">查看更多<van-icon name="arrow" /></div>
      </div>
      <div class="lanmu_box">
        <div class="box">
          <van-tabs v-model="active" @change="tabChange">
            <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
          </van-tabs>
        </div>
      </div>
      <div class="list_box" v-if="cardList.length">
      <div class="box" v-for="(item,index) in cardList" :key="index" @click="toCardDetail(item.id)">
        <img class="bj" src="/static/images/coupon_bj.png" alt="">
        <p class="label" >限时折扣</p>
        <div class="nr">
          <div class="left">
            <p class="price"><span>￥</span>{{item.sellPrice}}</p>
           
          </div>
          <p class="line"></p>
          <div class="right">
            <div class="name_box">
              <div class="name">
                <p class="title" >{{ item.name }}* {{ item.bindNum }}张</p>
                <p class="time">有效期天数：{{item.validDay}}</p>
                <p class="text">剩余:{{item.stock}}份</p>
              </div>
              <p class="anniu" v-if="item.stock" >去购买</p>
              <p class="anniu disable" v-else >已抢光</p>
            </div>
            <p class="jiesao">{{item.remark}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-else>
     <img mode="widthFix" src="/static/images/components/no_order.png" alt="" />
      <!-- <p class="text"></p> -->
   </div>
      <!-- <div class="coupon-item">
        <div class="item" v-for="(item, index) in cardList" :key="index" @click="toCardDetail(item.id)">
          <div class="left">
            <p class="name">{{ item.name }}</p>
            <p class="text">有效天数：{{ item.validDay }}天</p>
          </div>
          <div class="right">
            <p class="price">￥<span>{{ item.sellPrice }}</span></p>
            <p class="anniu">购买</p>
          </div>
        </div>
      </div> -->
    </div>

    <div class="wifi_pop huodong_pop" v-if="couponMsg && couponMsg.activityStuffVo">
      <van-popup :show="huodongShow">
          <div class="box">
            <img class="bj" :src="couponMsg.popupImg"
                alt="">
            <div class="nr2">
              <div class="nr2_box" v-if="couponMsg.activityStuffVo.stuffType==0">
                <!-- 折扣券 -->
                <div class="left" v-if="couponMsg.activityStuffVo.coupon&&couponMsg.activityStuffVo.coupon.couponType == 1">
                  <p><span>{{couponMsg.activityStuffVo.coupon.discount}}</span>折</p>
                  *{{couponMsg.activityStuffVo.receiveNum}}张
                </div>

                <!-- 指定金额 -->
                <div class="left" v-if="couponMsg.activityStuffVo.coupon&&couponMsg.activityStuffVo.coupon.couponType == 0">
                  <p><span>{{couponMsg.activityStuffVo.coupon.amount}}</span>元</p>
                  *{{couponMsg.activityStuffVo.receiveNum}}张
                </div>

                <!-- 满减券 -->
                <div class="left" v-if="couponMsg.activityStuffVo.coupon&&couponMsg.activityStuffVo.coupon.couponType == 2">
                  <p><span style="font-size: 25px;">{{couponMsg.activityStuffVo.coupon.content}}</span></p>
                  *{{couponMsg.activityStuffVo.receiveNum}}张
                </div>
                <div class="right">
                  <p class="name">{{couponMsg.activityStuffVo.coupon.name}}</p>
                  <p class="text">{{couponMsg.activityStuffVo.coupon.remark}}</p>
                </div>  
              </div>
              <div class="nr2_box" v-if="couponMsg.activityStuffVo.stuffType==1">
                <div class="left" v-if="couponMsg.activityStuffVo.extraTimeCard">
                  <p><span>{{ couponMsg.activityStuffVo.extraTimeCard.duration }}</span>分钟</p>
                  *{{couponMsg.activityStuffVo.receiveNum}}张
                </div>
                <div class="right">
                  <p class="name">{{couponMsg.activityStuffVo.extraTimeCard.cardName}}</p>
                  <p class="text">{{ couponMsg.activityStuffVo.extraTimeCard.cardIlk==0?'台球':'棋牌' }}通用</p>
                </div> 
              </div>
              <div class="nr2_box" v-if="couponMsg.activityStuffVo.stuffType==2">
                <div class="left" v-if="couponMsg.activityStuffVo.cardCoupon">
                  <p><span>{{ couponMsg.activityStuffVo.cardCoupon.hours }}</span>小时</p>
                  *{{couponMsg.activityStuffVo.receiveNum}}张
                </div>
                <div class="right">
                  <p class="name">{{couponMsg.activityStuffVo.cardCoupon.name}}</p>
                  <p class="text">{{ couponMsg.activityStuffVo.cardCoupon.cardCouponIlk==0?'台球':'棋牌' }}兑换卡卷</p>
                </div> 
              </div>
            </div>
          <div class="anniu2" @click="toHuodong">
            <p>一键领取</p>
          </div>
        </div>
        <p class="close" @click="huodongShow = false">
            <img src="/static/images/close1.png" alt="">
        </p>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { 
  getUserPhone
} from "@/utils/auth";
import {
  getPersonal,
  grtCardCouponList,
  getUserStarRecord,
  getUserExtraTimeCard,
  getSuggestActivity
} from "@/api/index";
export default {
  data(){
    return {
      huodongShow:false,
      countdown: 0,
      timeData: {},
      userMsg: {},
      vipMsg: {},
      greeting: this.greet(),
      cardList: [],
      userCardList: [],
      pointMsg:{},
      couponMsg:{},
      lanmu:[
        {name:'台球卡券',query:0},
        {name:'麻将卡券',query:1}
      ],
      cardCouponIlk:0
    }
  },
  methods: {

    tabChange(e){
      //console.log(e)
      this.cardCouponIlk=e.mp.detail.index
      this.getCardList()
    },

    saoma(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.scanCode({
        onlyFromCamera: true,
        success(res) {
          //console.log(res)
          wx.navigateTo({
              url: `/${res.path}`,
          });
        }
      })
    },
    toChongzhi(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/recharge/main`,
      });
    },
    toMeituan(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/writeOff/main`,
      });
    },

    // 跳转攒星
    toStar(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/daka/main`,
      });
    },

    // 获取攒星日期
    getStarMsg(){
      getUserStarRecord().then(res=>{
        if(res.statusCode == '00000'){
          let arr = []
          let length = res.data.userStarRecordList.length
          if(res.data.userStarRecordList.length < 12){
            for(let i = 0 ; i < 12 - length ; i++){
              arr.push(i)
            }
            res.data.userStarRecordList = res.data.userStarRecordList.concat(arr)
          }else{
            res.data.userStarRecordList = res.data.userStarRecordList.slice(0,12)
          }
          this.pointMsg = res.data
          //console.log(this.pointMsg)
        }
      })
    },

    toMoreCardList () {
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: '/pages/home/cardList/main',
      });
    },

    onChange(e) {
      // //console.log(e)
      this.timeData = e.target
      this.timeData.hours = this.timeData.hours<10?'0'+this.timeData.hours:this.timeData.hours
      this.timeData.minutes = this.timeData.minutes<10?'0'+this.timeData.minutes:this.timeData.minutes
      this.timeData.seconds = this.timeData.seconds<10?'0'+this.timeData.seconds:this.timeData.seconds
    },

    onFinish(){
      this.getExtraTimeCard()
    },

    toCardList(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: '/pages/card_list/main',
      });
    },

    toCardDetail(id){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/card_detail/main?id=${id}`,
      });
    },

    // 获取用户信息
    async getUserInfo(){
      await getPersonal().then(res=>{
        if (res.statusCode == '00000') {
          this.vipMsg = this.nextLevel(res.data.vipLevelList, res.data.integral)
          //console.log(this.vipMsg)
          this.userMsg = res.data
        }
      })
    },

    // 获取距离下个会员的等级
    nextLevel(vipList, newValue) {
      // 按所需积分升序
      const arr = [...vipList].sort((a, b) => a.needIntegral - b.needIntegral);

      // 已达最高等级
      const max = arr[arr.length - 1];
      if (newValue >= max.needIntegral) {
        return { name: max.vipName, lack: 0, percent: 100 };
      }

      // 找到下一个目标
      const targetIdx = arr.findIndex(item => item.needIntegral > newValue);
      const target = arr[targetIdx];

      // 上一等级（用于计算百分比区间）
      const prev = targetIdx === 0 ? { needIntegral: 0 } : arr[targetIdx - 1];

      const lack = target.needIntegral - newValue;                       // 还差多少
      const percent = ((newValue - prev.needIntegral) /
                    (target.needIntegral - prev.needIntegral)) * 100;   // 区间进度

      return { name: target.vipName, lack, percent: Math.min(100, Math.max(0, percent)) };
    },

    // 获取问候语
    greet() {
      const h = new Date().getHours()
      if (h <  6) return '晚上好'
      if (h <  9) return '早上好'
      if (h < 12) return '上午好'
      if (h < 14) return '中午好'
      if (h < 18) return '下午好'
      return '晚上好'
    },

    // 卡券列表
    async getCardList() {
      const res = await grtCardCouponList({cardCouponIlk:this.cardCouponIlk})
      if (res.statusCode === '00000' ) {
        this.cardList = res.data
      }
    },

    // 获取加时卡
    async getExtraTimeCard() {
      const res = await getUserExtraTimeCard()
      if (res.statusCode === '00000' ) {
        //console.log(res.data)
        this.countdown = res.data.countdown
        this.userCardList = res.data.userExtraTimeCards
      }
    },
    // guideOpenSubscribeMessage() {    
    //         var that = this;
    //         wx.showModal({         
    //             title: '提示',
    //             content: '检测到您没有开启订阅消息的权限，是否去设置？',
    //             success: function (sm) {
    //                 if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
    //                     wx.openSetting();
    //                 } else if (sm.cancel) { 
    //                     wx.showToast({
    //                         title: '您没有同意授权订阅消息，订阅失败',
    //                         icon: 'none'
    //                     }); 
    //                 }
    //             }
    //         })    
    //     },
    // 跳转转增加时卡 
    toShiYong(id){
      const that = this
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }

      if (wx.requestSubscribeMessage) {
                wx.requestSubscribeMessage({
                    tmplIds: ['LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8','5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4'],
                    success: (res) => {
                        console.log(res);
                        if(res["LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8"] == 'accept' && res["5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4"] == 'accept'){
                          wx.switchTab({
                              url:'/pages/order/main'
                          })
                        }else{
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        // wx.showToast({
                                        //     title: '您没有同意授权订阅消息，订阅失败',
                                        //     icon: 'none'
                                        // }); 
                                        wx.switchTab({
                                            url:'/pages/order/main'
                                        })
                                    }
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        //console.log(res)
                        if (res.errCode == 20004) {
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                        // wx.showToast({
                                        //     title: '您没有同意授权订阅消息，订阅失败',
                                        //     icon: 'none'
                                        // }); 
                                        wx.switchTab({
                                            url:'/pages/order/main'
                                        })
                                    }
                                }
                            })
                        }
                        //console.log("取消")
                    },
                    complete: (errMsg) => {
                        //console.log("订阅消息 完成 " + errMsg); 
                    }
                })
            }
     
    },
    toZengSong(id){
      const that = this
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }

      if (wx.requestSubscribeMessage) {
                wx.requestSubscribeMessage({
                    tmplIds: ['LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8','5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4'],
                    success: (res) => {
                        console.log(res);
                        if(res["LtzfaLObZ901OFH4RAus1VOoNu7bKP0_h0oCKWGFbO8"] == 'accept' && res["5uggA9vmvCAhyBoHA54gocixx1-FsjuJMhpNELSYzY4"] == 'accept'){
                          wx.navigateTo({
                            url: `/pages/giveCard/main?userExtraTimeCardId=${id}`,
                          });
                        }else{
                              wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                      wx.navigateTo({
                                          url: `/pages/giveCard/main?userExtraTimeCardId=${id}`,
                                        });
                                    }
                                }
                            })
                        }
                    },
                    fail: (res) => {
                        //console.log(res)
                        if (res.errCode == 20004) {
                            // that.guideOpenSubscribeMessage();
                            wx.showModal({         
                                title: '提示',
                                content: '检测到您没有开启优惠订阅，去开启？',
                                confirmText: '去开启',
                                 cancelText:'下次再去',
                                success: function (sm) {
                                    if (sm.confirm) {// 用户点击了确定 可以调用删除方法了            
                                        wx.openSetting();
                                    } else if (sm.cancel) { 
                                      wx.navigateTo({
                                          url: `/pages/giveCard/main?userExtraTimeCardId=${id}`,
                                        });
                                    }
                                }
                            })
                        }
                        //console.log("取消")
                    },
                    complete: (errMsg) => {
                        //console.log("订阅消息 完成 " + errMsg); 
                    }
                })
            }
     
    },
    // 跳转福利
    toFl(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/fuli/main`,
      });
    },

    // 查询是否推荐活动
    getHongDong(){
      getSuggestActivity().then(res=>{
        if(res.statusCode == '00000'){
          if(res.data && !res.data.receive){
            this.couponMsg = res.data
            this.huodongShow = true
          }else{
            this.huodongShow = false
            this.couponMsg = {}
          }
        }
      })
    },

    // 跳转活动
    toHuodong(){
      wx.navigateTo({
        url: `/pages/huodong/main?activityId=${this.couponMsg.id}`,
      });
    },
  },
  onShow() {
    if (wx.canIUse("getUpdateManager")) {
      //console.log("进去版本检测------->");
      const updateManager = wx.getUpdateManager();
      updateManager.onCheckForUpdate(function (res) {
        //console.log("是否有新版本",res.hasUpdate);
        if (res.hasUpdate) {
          //下载成功
          updateManager.onUpdateReady(function () {
            wx.showModal({
              title: "更新提示",
              content: "新版本已经准备好，是否重启应用？",
              success: function (res) {
                if (res.confirm) {
                  updateManager.applyUpdate();
                }
              },
            });
          });
          //下载失败
          updateManager.onUpdateFailed(function () {
            wx.showModal({
              title: "已经有新版本了哟~",
              content: "新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~",
            });
          });
        } else {
          //console.log("最新版本-------》");
        }
      });
    } else {
      wx.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
    this.getHongDong()
    this.getStarMsg()
    this.getUserInfo()
    this.getCardList()
    this.getExtraTimeCard()
  },
  onUnload() {
    this.huodongShow = false
  },
  onShareAppMessage() {
    return {
      title: '杠小二共享棋牌室',
      path: `/pages/home/main`,
      imageUrl:'https://yxzw.oss-cn-chengdu.aliyuncs.com/rich/20230718/vSumUOfjoOmPQAX85LXA.png'
    }
  },
}
</script>

<style lang="scss" scoped>
.content_box {
  // background-color:#20211d;F5F5F5
  background-color:#F5F5F5;
  min-height: 100vh;
  .wrap-box {
    width: 343px;
    min-height: 170rpx;
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    margin: -30px auto 0px auto;
    position: relative;
    border-radius: 22rpx;

  .bg-wrap {
   
    display: -webkit-flex;
    display: flex;
    align-items: center;
    padding: 12px;
   
   .img-wrap {
      background-color: #639300;
      position: relative;
      width: 80rpx;
      height: 80rpx;
      border-radius: 75rpx;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 75rpx;
      }
    }
    .info-wrap {
      flex: 1;
      display: flex;
      .left {
        width: 264rpx;
        margin-left: 20rpx;
        .name {
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000;
        }
        .progress-box {
          width: 100%;
          height: 8rpx;
          background: rgba(179, 173, 173, 0.3);
          border-radius: 6rpx;
          margin: 10rpx 0;
          .progress {
            width: 60%;
            height: 100%;
            background: rgba(0, 194, 0, 1);
            border-radius: 6rpx;
          }
        }
        .num {
          font-size: 24rpx;
          color: #999;
          span {
            color: rgba(0, 194, 0, 1);
          }
        }
      }
      .right {
        display: flex;
        margin-left: auto;
        .section-item {
          align-items: center;
          color: #929292;
          display: -webkit-flex;
          display: flex;
          flex-direction: column;
          font-size: 20rpx;
          font-weight: 400;
          height: 100%;
          justify-content: center;
          margin-right: 20rpx;
          &:first-child {
            margin-right: 60rpx;
          }
          .num {
            color: rgba(0, 194, 0, 1);
            font-size: 26rpx;
            font-weight: 700;
            margin-bottom: 8rpx
          }
        }
      }
    }
  }
  .uvip-wrap {
    width: 100%;
    margin-top: 10rpx;
    position: relative;
    border-radius: 10rpx;
    z-index: 1;
    // background: #F8D7AE;
    padding-bottom: 20rpx;
    img {
      width: 100%;
      height: 100%;
    }
    .coupon {
      .coupon-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 30rpx;
        color: #333;
        font-size: 28rpx;
        font-weight: 600;
        // padding-top: 30rpx;
        div {
          display: flex;
          align-items: center;
          .line {
            width: 6rpx;
            height: 28rpx;
            background-color:  rgba(0, 194, 0, 1);
            border-radius: 2rpx;
            margin-right: 10rpx;
          }
          span {
            font-size: 20rpx;
            color: #999;
            margin-left: 20rpx;
          }
        }
        .djs {
          font-size: 20rpx;
          color: #ce4646;
          margin-left: 20rpx;
          .item {
            margin-right: 5rpx;
            .mh {
              font-size: 16rpx;
              margin-left: 2rpx;
            }
          }
        }
      }
     
      .coupon-item {
        display: flex;
        padding: 20rpx 30rpx 0 30rpx;
        .hor-scroll {
          width: 100%;
          height: 180rpx;
          white-space: nowrap;
        }
        .item {
          width: 240rpx;
          height: 160rpx;
          display: inline-block;
          // background: rgba(81, 78, 78, 0.6);
          // backdrop-filter: blur(4px);
          // border-radius: 16rpx;
          // flex: 1;
          margin-right: 15rpx;
          // padding: 15rpx;
          position: relative;
          text-align: center;
          z-index: 1;
          margin-top: 5px;
          .showimg{
            width: 240rpx;
            height: 160rpx;
            
            z-index: -1;
            position: absolute;
            top: 0 ;
            left: 0;
            img{
              width: 100%;
              height: 100%;
            }
          }
          &:last-child {
            margin-right: 0;
          }
          .label {
            font-size: 20rpx;
            color: #030005;
            margin-bottom: 5rpx;
            position: absolute;
            top: 0;
            right: 8px;
            background: #ffe500;
            padding: 4rpx 10rpx;
            border-radius: 0px 7px 1px 5px;
          }
          .time {
            font-size: 46rpx;
            color: #030005;
            font-weight: 700;
            margin-top: 10rpx;
            font-family: "kaiti";
            // font-family: PingFangSC-Regular, PingFang SC;
            span {
              font-size: 20rpx;
              font-weight: 400;
              padding-left: 2px;
            }
          }
          .text {
            font-size: 20rpx;
            color: rgba(0, 0, 0, .7);
          }
          .anniu {
            display: flex;
            justify-content: center;
            margin-top: -1px;
            // gap: 20rpx;
            p {
              margin: 0;
              padding: 0;
              width: 80rpx;
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              color: #fff;
              background: #474141;
              border-radius: 20rpx;
              font-size: 22rpx;
              font-weight: 500;
              margin-top: 10rpx;
              margin-right: 5px;
              margin-left: 5px;
            }
           
          }
           .tsbtn{
              p{
                width: 130rpx !important;
                background-color:rgba(0, 0, 0, .3); ;
              }
              
            }
        }
      }
      .more {
        text-align: center;
        color: rgba(0, 194, 0, 1);;
        font-size: 24rpx;
        margin-top: 20rpx;
      }
    }
  }
}
  .all-wrap {
    margin: 0rpx 30rpx;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    .scan-wrap {
      position: relative;
      width: 48%;
      height: 180px;
      overflow: hidden;
      background-color: #20211d;
      border-radius: 14rpx;
      .mask-bg1 {
        fill: rgba(9,255,34,.1);
        background-color: rgba(9,255,34,.1);
        filter: blur(32.50992584px);
        flex-shrink: 0;
        height: 220rpx;
        left: -80rpx;
        position: absolute;
        top: -80rpx;
        width: 220rpx
      }
      .mask-bg2 {
        fill: rgba(255,201,9,.19);
        background-color: rgba(255,201,9,.19);
        filter: blur(30.2734375px);
        flex-shrink: 0;
        height: 156rpx;
        left: 20rpx;
        position: absolute;
        top: -100rpx;
        width: 226rpx
      }
      .bg-icon {
        position: absolute;
        width: 250rpx;
        height: 250rpx;
        right: 0;
        bottom: 0;
      }
      .text-box {
        margin: 30rpx;
        .name {
          color: #fff;
          font-size: 38rpx;
          font-weight: 600;
          margin-bottom: 14rpx;
        }
        .text {
          color: #fff;
          font-size: 24rpx;
        }
      }
      .anniu {
        position: absolute;
        bottom: 40rpx;
        left: 20rpx;
        width: 150rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        color: #000;
        background: #f1f1f1;
        border-radius: 100rpx;
        font-size: 26rpx;
        font-weight: 500;
      }
    }
    .or-wrap {
      width: 49.3%;
      .invite-wrap {
        overflow: hidden;
        position: relative;
        background: linear-gradient(92deg,#ff9416 -.15%,#ffbc10 98.62%);
        border-radius: 14rpx;
        width: 100%;
        height: 170rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &:first-child {
          background: linear-gradient(92deg,#7fbb00 -.15%,#97de00 98.62%);
          margin-bottom: 20rpx;
          .bg-icon {
            width: 150rpx;
            height: 160rpx;
          }
        }
        .bg-icon {
          position: absolute;
          width: 200rpx;
          height: 200rpx;
          right: 0;
          bottom: 0;
          z-index: 1;
        }
        .content-top {
          margin-left: 30rpx;
          position: relative;
          z-index: 2;
          color: #fff;
          font-size: 38rpx;
          font-weight: 600;
        }
        .content-bottom {
          @extend .content-top;
          margin-top: 10rpx;
          color: #fff;
          font-size: 24rpx;
        }
      }
    }
  }
}
.banner {
  width: 100%;
  height: 366rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 750rpx;
    height: 366rpx;
    object-fit: cover;
  }
}
.star_box{
  margin:16rpx 32rpx 0 32rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
  position: relative;
  height: 140rpx;
  .bj{
    width: 100%;
    position: absolute;
    top:0;
    height: 100%;
  }
  .star{
    display: flex;
    align-items: center;
    padding:26rpx 24rpx 10rpx 24rpx;
    position: relative;
    z-index: 10;
    .title_box{
      display: flex;
      align-items: center;
      margin-right:28rpx;
      .line{
        width: 6rpx;
        height: 28rpx;
        background: #00C200;
        border-radius: 4rpx;
        margin-right:16rpx;
      }
      .title{
        font-size: 28rpx;
        font-weight: 500;
      }
    }
    .xx{
      display: flex;
      p{
        position: relative;
        margin-right:4rpx;
        &:last-child{
          margin-right:0;
        }
        span{
          position: absolute;
          top:0;
          left: 0;
          display: inline-block;
          width: 100%;
          height: 100%;
          text-align: center;
          font-size: 20rpx;
          text-align: center;
          line-height: 36rpx;
          color:#fff;
        }
        img{
          width: 36rpx;
          height: 36rpx;
        }
      }
    }
  }
  .time_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 24rpx 10rpx 24rpx;
    position: relative;
    z-index: 10;
    font-size:24rpx;
    color:#999999;
    .left{
      display: flex;
      .text{
        color:#111111;
        margin-left:32rpx;
        span{
          color:#FF6600;
        }
      }
    }
    .right{
      span{
        color:#FF6600;
      }
    }
  }
}
.coupon-list {
  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 30rpx;
    .title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      margin-top: 10px;
      .line {
        width: 6rpx;
        height: 28rpx;
        background-color: rgba(0, 194, 0, 1);;
        border-radius: 2rpx;
        margin-right: 10rpx;
      }
      span {
            font-size: 20rpx;
            color: #999;
            margin-left: 20rpx;
            font-weight: 400;
          }
    }
    .more {
      font-size: 24rpx;
      color: #999;
      display: flex;
      align-items: center;
      van-icon {
        margin-left: 5rpx;
        font-size: 20rpx;
      }
    }
  }
  .list_box{
    padding-top: 24rpx;
    padding-bottom: 20px;
    .box{
      width: 92%;
      height: 208rpx;
      position: relative;
      margin:0 auto;
      margin-bottom:24rpx;
      .bj{
        width: 100%;
        height: 100%;
        position: absolute;
        top:0;
        left:0;
        z-index: 10;
      }
      .bj1{
        width: 100%;
        height: 100%;
        position: absolute;
        top:15rpx;
        left:0;
        z-index: 1;
      }
      .label{
        position: absolute;
        top:0;
        left: 6rpx ;
        padding:0 16rpx;
        height: 40rpx;
        background: linear-gradient(to right,#FF4357, #FE6E34);
        z-index: 20;
        font-size:22rpx;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;
        font-weight: 500;
      }
      .nr{
        position: relative;
        z-index: 30;
        display: flex;
        .left{
          width: 29%;
          height: 208rpx;
          display: flex;
          flex-direction:column;
          justify-content: center;
          align-items: center;
          .price{
            display: flex;
            align-items: baseline;
            font-size:60rpx;
            font-weight: bold;
            color:#FF4622;
            span{
              font-size:30rpx;
            }
          }
         
        }  
        .line{
          width: 1rpx;
          height: 160rpx;
          border-right:1px dashed #E4E4E4;
          margin-top:22rpx;
        }
        .right{
          // flex: 1;
          width: 600rpx;
          padding-left:24rpx;
          .name_box{
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-top:40rpx;
            margin-bottom:28rpx;
            .name{
              padding-top: 10px;
              .title{
                color:#242526;
                font-size:32rpx;
                font-weight: 500;
                margin-bottom:12rpx;
                
              }
              .time{
                color:#666666;
                font-size:24rpx;
              }
              .text{
            font-size:24rpx;
            color:#FF4622;
            margin-top: 5px;
            position: absolute;
            top: 20px;
            right: 15px;
          }
            }
            img{
              width: 124rpx;
              height: 124rpx;
              position: absolute;
              right: 6rpx;
              top:8rpx;
            }
            .anniu{
              width: 114rpx;
              height: 50rpx;
              background: linear-gradient(to right,#FF4357, #FE6E34);
              font-size:24rpx;
              color:#fff;
              font-weight: bold;
              border-radius: 50rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right:22rpx;
            }
            .disable{
              background: rgba(0, 0, 0, .3);
            }
          }
          .jiesao{
            color:#999999;
            font-size:22rpx;
          }
        }      
      }
      &.on{
        .label{
          color:#383838;
          background: #F6F6F8 ;
        }
        .price{
          color:#AEAFB0 !important;
        }
        .text{
          color:#B0B1B4 !important ;
        }
        .title{
          color:#8D8E90 !important;
        }
        .time{
          color:#AEAFB0 !important ;
        }
        .jiesao{
          color:#C8C8CA !important;
        }
      }
    }
  }

  .coupon-item {
    .item {
      background: rgba(39,43,44,.6);
      backdrop-filter: blur(4px);
      border-radius: 16rpx;
      margin: 0rpx 30rpx 20rpx 30rpx;
      padding: 20rpx;
      display: flex;
      align-items: center;
      .left {
        .name {
          font-size: 26rpx;
          color: #fff;
          font-weight: 500;
          margin-bottom: 10rpx;
        }
        .text {
          font-size: 22rpx;
          color: #999;
        }
      }
      .right {
        margin-left: auto;
        text-align: right;
        .price {
          font-size: 30rpx;
          color: #ffe500;
          font-weight: 700;
          margin-bottom: 10rpx;
          span {
            font-size: 40rpx;
          }
        }
        .anniu {
          width: 100rpx;
          height: 40rpx;
          line-height: 40rpx;
          text-align: center;
          color: #000;
          background: #f1f1f1;
          border-radius: 100rpx;
          font-size: 24rpx;
          font-weight: 500;
          margin-left: auto;
        }
      }
    }
  }
}
.dh_fl{
  position: fixed;
  right: 30rpx;
  top:70%;
  z-index: 50;
  border-radius: 50%;
  width: 150rpx;
  height: 130rpx;
  text-align: center;
  color:#fff;
  font-size: 28rpx;
  font-weight: 500;
  img{
    width: 100%;
    height: 100%;
  }
}
.wifi_pop{
    /deep/ .van-popup {
      background: none;
      width: 530rpx;
    }
    .box{
      width: 530rpx;
      height: 616rpx;
      position: relative;
      .bj{
        width: 530rpx;
        height: 616rpx;
        top:0;
        left: 0;
        position: absolute;
      }
      .nr{
        position: relative;
        z-index: 10;
        width: 80%;
        margin:0 auto;
        top:280rpx;
        .zhanghao{
          background: #F4FFF4;
          font-size: 28rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          padding:32rpx;
          border-radius: 16rpx;
          
          p{
            &:nth-of-type(1){
              margin-bottom:24rpx;
            }
          }
        }
        
      }
      .anniu{
        height: 80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        margin-top:48rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
      .anniu1{
        width: 434rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #00C200;
        border-radius: 40rpx;
        margin:0 auto;
        margin-top:40rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        position: relative;
        top:250rpx;
      }
      .nr1{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-bottom:48rpx;
        position: relative;
        top:280rpx;
      }
      button::after {
        border: none;
      }
      button{
        background: none;
        color:#222;
        margin:0;
        .img{
          width: 160rpx;
          height: 160rpx;
          background: #F8F8F8;
          border-radius: 16rpx;
          display: flex;
          align-items: center;
          flex-direction:column;
          justify-content: center;
          .img1{
            width: 70rpx;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 56rpx;
              height: 48rpx;
            }
          }
          .img2{
            width: 70rpx;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              width: 42rpx;
              height: 56rpx;
            }
          }
        }
        .text{
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #111111;
          text-align: center;
        }
      }
    }
    .close{
      width: 64rpx;
      height: 64rpx;
      margin:32rpx auto 0 auto;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .pop_box1{
    background: #fff;
    position: fixed;
    top:0;
    z-index: 100;
    width: 100%;
    box-shadow: 0rpx 10rpx 20rpx 4rpx rgba(139,129,114,0.1);
    padding-bottom:10rpx;
    .box{
      display: flex;
      align-items: center;
      padding:0 40rpx;
      img{
        width: 260rpx;
        height: 70rpx;
      }
    }
  }
.huodong_pop{
  /deep/ .van-popup {
    background: none;
    width: 656rpx;
  }
  .box{
    width: 656rpx;
    height: 958rpx;
    position: relative;
    .bj{
      width: 656rpx;
      height: 958rpx;
      top:0;
      left: 0;
      position: absolute;
    }
    .anniu2{
      position: absolute;
      bottom:50rpx;
      z-index: 10;
      width: 100%;
      p{
        width: 538rpx;
        height: 100rpx;
        line-height: 100rpx;
        background: #00C200;
        border-radius: 50rpx;
        font-size: 40rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        margin:0 auto;
      }
    }
    .nr2{
      position: absolute;
      z-index: 10;
      width: 100%;
      margin:0 auto;
      bottom:240rpx;
      height: 150rpx;
      .nr2_box{
        width: 82%;
        height: 150rpx;
        margin:0 auto;
        display: flex;
        align-items: center;
        .left{
          display: flex;
          justify-content: center;
          align-items: baseline;
          width: 50%;
          font-size: 30rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FE6706;
          span{
            font-size: 70rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #FE6706;
          }
        }
        .right{
          width: 48%;
          text-align: center;
          .name{
            width: 80%;
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin:0 auto;
            margin-bottom:6rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .text{
            width: 80%;
            margin:0 auto;
            font-size: 26rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            color: #B5B5B5;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
}
.lanmu_box{
  height: 88rpx;
  margin-bottom:24rpx;
  .box{
    width: 100%;
    z-index: 100;
  }
  /deep/ .van-ellipsis {
    background: none;
  }
  /deep/ .van-tab{
    color:#666666;
    font-size:30rpx;
  }
  /deep/ .van-tabs__line{
    background: #00C200;
  }
  /deep/ .van-tab--active{
    color:#00C200;
    font-weight: bold;
  }
}
.no_data{
   text-align: center;
   font-size:28rpx;
   color:#333;
   padding-top:150rpx;
   .text{
     font-weight: bold;
     color:#999;
   }
   img{
     width: 248rpx;
     margin-bottom:10rpx;
   }
   .button{
     width: 240rpx;
     height: 70rpx;
     line-height: 70rpx;
      background: #02b4ae;
     // background: #35c982;
     border-radius: 120rpx;
     text-align: center;
     font-size: 30rpx;
     color: #fff;
     margin-top: 30rpx;
     margin: 30rpx auto 0 auto;
   }
 }
</style>